<template>
    <div>
        <div class="head">
            <div class="detail">
                <div class="title">{{refund.refundStatusStr}}</div>
                <div class="subtitle">{{refund.createTime}}</div>
            </div>
        </div>
        <div class="progress" v-if="active !== -1">
            <van-steps :active="active"  active-color="#f00">
                <van-step>等待卖家受理</van-step>
                <van-step>卖家处理中</van-step>
                <van-step>退款成功</van-step>
            </van-steps>
        </div>
        <van-panel title="退款信息" style="margin-top: 10px;">
            <van-card
                @click.native="$router.push(`/goods/detail/${goods.goodsId}`)"
                :desc="goods.goodsSpecName"  
                :title="goods.goodsTitle"
                :thumb="`/images/${goods.goodsTitleImage}`"
            >
            </van-card>
            <div slot="footer" class="footer" >
                <p>退款方式: {{refund.refundWayStr}}</p>
                <p v-if="refund.refundWay == 1">货物状态: {{refund.refundGoodsStatusStr}}</p>
                <p>退款原因: {{refund.refundReason}}</p>
                <p>退款金额: <span style="color: #f00;">¥{{refund.userApplyAmount | money}}</span></p>
                <p>退款编号: {{refund.orderSn}}</p>
                <p>申请时间: {{refund.createTime}}</p>
                <div class="btn van-hairline--top" @click="cancel" v-if="refund.refundStatus != -10 && refund.refundStatus != 50 && refund.refundStatus != 60">撤销退款</div>
            </div>
        </van-panel>
    </div>
</template>

<script>
export default {
    name: 'refundDetail',
    data() {
        return {
            goods: {},
            refund: {},
            active: 0,
        }
    },

    methods: {
        getDetail() {
            this.$http.post('/shop/orderRefund/front/getOrderRefund', {
                refundId: this.$route.params.id
            }).then(res => {
                if (res.status === 0) {
                    this.goods = {
                        goodsSpecName: res.data.goodsSpecName,
                        goodsTitle: res.data.goodsTitle,
                        goodsTitleImage: res.data.goodsTitleImage,
                        goodsId: res.data.goodsId
                    }

                    this.refund = {
                        createTime: res.data.createTime,
                        refundWayStr: res.data.refundWayStr,
                        refundWay: res.data.refundWay,
                        refundGoodsStatusStr: res.data.refundGoodsStatusStr,
                        refundReason: res.data.refundReason,
                        refundStatusStr: res.data.refundStatusStr,
                        refundStatus: res.data.refundStatus,
                        userApplyAmount: res.data.userApplyAmount,
                        orderSn: res.data.orderSn,
                    }

                    switch(Number(res.data.refundStatus)) {
                        case 1:
                            this.active = 0;
                            break;
                        case 20:
                            this.active = 1;
                            break;
                        case 39:
                            this.active = 1;
                            break;
                        case 60:
                            this.active = 2;
                            break;
                        default:
                            this.active = -1;
                            break;
                    }
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        cancel() {
            this.$dialog.confirm({
                message: '撤销退款申请后，本次退款申请将关闭，如果后续仍有问题，您可以再次发起退款申请',
                cancelButtonText: '暂不撤销'
            }).then(() => {
                this.$http.post('/shop/orderRefund/front/cancelOrderRefund', {
                    refundId: this.$route.params.id,
                }).then(res => {
                    if (res.status === 0) {
                        this.$toast.success('撤销成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 700);
                    } else {
                        this.$toast.fail(res.message);
                    }
                })
            }).catch(() => {
            // on cancel
            });
        }
    },


    created() {
        this.getDetail();
    }
}
</script>

<style scoped lang="less">
    .head {
        background: #fff;
        padding-bottom: 0;
        font-size: 12px;
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        margin-bottom: 10px;

        .detail {
            padding: 10px 15px;
            .title {
                color: #000;
                font-size: 16px;
                font-weight: 700;
                line-height: 32px;
            }
            .subtitle {
                font-size: 12px;
                line-height: 18px;
                margin-bottom: 6px;
            }
        }

    }

    .footer {
        p {
            color: #666;
            font-size: 12px;
            line-height: 22px;
        }

        .btn {
            width: 100%;
            padding: 15px 0 5px 0;
            text-align: center;
            box-sizing: border-box;
            background-color:#fff;
            color: #38f;
            font-size: 14px;
            overflow: hidden;
            margin-top: 15px;
        }
    }

    .progress {
        padding: 10px 20px;
        background-color: #fff;
    }
</style>
